

var line2data1=[54, 51, 53, 55, 49, 52, 49, 51, 52, 52, 50, 48]
var line2lengend=["IP数"]
var timeData= ['2017-01','2017-02','2017-03','2017-04','2017-05','2017-06','2017-07','2017-08','2017-09','2017-10','2017-11','2017-12']
var lineOption = {
    color : ["#1de5f2","#0edf4d"],
    tooltip : {
        trigger: 'axis',
    },
    legend: {
        orient: 'horizontal',
        right:20,
        data:line2lengend,
        textStyle:{
            color:'#fff'
        }
    },
    grid: {
        top:30,
        left: '4%',
        right: '4%',
        bottom: 30,
        containLabel: true
    },
    xAxis: {
        boundaryGap : false,
        type: 'category',
        splitLine:{    //grid区域分隔线
            show:false,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true,
            textStyle: {
                color: '#0d7790'
            }
        },
        axisTick: {
            show: false   //刻度线
        },
        axisLine:{
            show: true,   //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#fff"
            }
        },
        data : timeData
    },
    yAxis : {
        splitLine:{    //grid区域分隔线
            show:true,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisTick: {
            show: false   //刻度线
        },
        axisLine: {
            show: true ,  //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#fff"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true
        },
    },
    series : [
        {
            name:line2lengend[0],
            smooth: true,
            type:'line',
            symbol:'none',  //这句就是去掉点的
            lineStyle: { normal: {
                color:'#1de5f2',
            }},
            areaStyle: {
                normal: {
                    color:'#1de5f2',
                    opacity: 0.2
                }
            },
            data:line2data1
        }
    ]
};
var lineChart = echarts.init(document.getElementById('lineEc'))
lineChart.setOption(lineOption);

//地图
var mapData=[
	{name: '北京',value: 213 },
  {name: '天津',value: 444},
  {name: '上海',value: 2 },
  {name: '重庆',value: 456 },
  {name: '河北',value: 78},
  {name: '河南',value:32 },
  {name: '云南',value: 87 },
  {name: '辽宁',value: 456 },
  {name: '黑龙江',value: 86 },
  {name: '湖南',value: 78 },
  {name: '安徽',value: 123 },
  {name: '山东',value: 456 },
  {name: '新疆',value: 546},
  {name: '江苏',value: 456 },
  {name: '浙江',value: 456 },
  {name: '江西',value: 879 },
  {name: '湖北',value: 98 },
  {name: '广西',value: 876 },
  {name: '甘肃',value: 898 },
  {name: '山西',value: 213 },
  {name: '内蒙古',value: 546 },
  {name: '陕西',value: 879 },
  {name: '吉林',value: 567 },
  {name: '福建',value: 453 },
  {name: '贵州',value: 354 },
  {name: '广东',value: 354 },
  {name: '青海',value: 453 },
  {name: '西藏',value: 543 },
  {name: '四川',value: 45 },
  {name: '宁夏',value: 456 },
  {name: '海南',value: 34 },
  {name: '台湾',value: 534 },
  {name: '香港',value: 543 },
  {name: '澳门',value: 453 }
]
	
var optionMap = {
	tooltip: {
		trigger: 'item',
		formatter:function(param){
//			console.log(param)
			return '<div>机房数：'+param.value+'</div><div>IP数：'+50+'</div>'
		}
	},
	visualMap: {
    seriesIndex: 0,
    min: 0,
    max: 800,
    left: '10%',
    top: 'bottom',
    itemHeight:'70',
    bottom:'10%',
    inRange: {
    //  color: ['#42a5e1','#076ba6']
    	color: ['#0ef0e6','#076ba6']
    },
//      text: ['高','低'],           // 文本，默认为数值文本
    calculable: true,
    textStyle:{
    	color:'#fff'
    }
//  hoverLink: false
	},
	series: [{
		zoom: 1.1,
		type: 'map',
		mapType: 'china',
		roam: true,
		label: {
			normal: {
				show: false,
				textStyle: {
					color: '#fff'
				}
			},
			emphasis: {
				show: false,
				textStyle: {
					color: '#fff'
				}
			}
		},
		itemStyle: {
			normal: {
				show:false,
				borderColor: '#134b99',
				borderWidth: 1,
				areaColor: '#388ec7'
			},
			emphasis: {
				areaColor: '#fce24f',
				borderColor: '#fce24f'
			}
		},
		data:mapData
	}]
};

var mapChart = echarts.init(document.getElementById('mapEc'))
mapChart.setOption(optionMap)

//柱状图

var timeData= ['北京','上海','浙江','广东','湖南','山东','江苏','福建','河南','辽宁']
var data1=[22, 20, 16, 15,14, 13, 11, 9, 7, 2]
var data2=[120, 182, 301, 234, 190, 150, 110, 202, 201, 364]
var barOption = {
    color : ["#0ea4e3","#88acf8"],
    tooltip : {
//      trigger: 'axis',
    },
    grid: {
        top:10,
        left: 10,
        right: '3%',
        bottom: 0,
        containLabel: true
    },
    xAxis: {
//      boundaryGap : false,
        type: 'category',
        axisPointer: {
	              type: 'shadow'
	          },
	          axisLabel:{
	          	color:'#c0d4da'
	          },
		        axisLine:{
		        	show:true,
		        	lineStyle:{
		        		color:'#c0d4da'
		        	}
		        },
        data : timeData
    },
    yAxis : {
        axisLabel: {
            color:'#c0d4da'
          },
          axisLine:{
	        	show:true,
	        	lineStyle:{
	        		color:'#c0d4da'
	        	}
        	},
        	splitLine:{
        		lineStyle:{
	        		color:'#272858'
	        	}
        	},
    },
    series : [
        {
            name:'企业数',
            type:'bar',
            barWidth:'50%',
            symbol:'none',  //这句就是去掉点的
            lineStyle: { normal: {
                color:'#1de5f2',
            }},
            areaStyle: {
                normal: {
                    color:'#1de5f2',
                    opacity: 0.2
                }
            },
            data:data1
        }
    ]
	}

var barChart = echarts.init(document.getElementById('barEc'))
barChart.setOption(barOption);


//关系图
var json=[
    [
        {name: '北京电信',value: '103.19.64.140',},
        {name: '京B1.B2-20120130\n\n\n\n云方舟\n\n\n\n东四机房',value: '103.19.64.140',},
        {name: '京B1.B2-20120130\n\n\n\n四维同创\n\n\n\n东四机房',value: '103.19.64.140',}
    ],
    [
        {name: '北京联通',value: '123.126.106.108',},
        {name: 'B1.B2-20151072\n\n\n\n烽火云\n\n\n\n金鱼池电话局IDC机房',value: '123.126.106.108',},
        {name: '京B1.B2-20140001\n\n\n\n首信融合\n\n\n\n未明确机房',value: '123.126.106.108',}
    ],
    [
        {name: '北京电信',value: '119.57.20.224',},
        {name: '京B1.B2-20060090\n\n\n\n日升天信\n\n\n\n东四机房',value: '119.57.20.224',},
        {name: '京B1.B2-20120130\n\n\n\n云方舟\n\n\n\n东四机房',value: '119.57.20.224',},
    ],
    [
        {name: '联通/电信',value: '103.25.22.66',},
        {name: '京B2.B1-20120001\n\n\n\n东方瑞庭\n\n\n\n国家数据中心',value: '103.25.22.66',},
        {name: 'B1.B2-20150254\n\n\n\n福虎信息\n\n\n\n北京兆维电信机房',value: '103.25.22.66',}
    ],
    [
        {name: '上海电信',value: '180.153.145.30',},
        {name: '沪B2-20140002\n\n\n\n闪耀信息\n\n\n\n国家数据中心',value: '180.153.145.30',},
        {name: 'nB1-20171199\n\n\n\共启网络\n\n\n\n未明确机房',value: '180.153.145.30',},
    ],
    [
        {name: '江西电信',value: '218.95.39.207',},
        {name: '嘉赣B2-20100062\n\n\n\n嘉维科技\n\n\n\n九江机房',value: '218.95.39.207',},
        {name: '赣B2-20080012\n\n\n\n利晨科技\n\n\n\n未明确机房',value: '218.95.39.207',},
    ],
    [
        {name: '湖北电信',value: '219.139.190.167',},
        {name: '鄂B2-20100095\n\n\n\n众远信息\n\n\n\n国家数据中心',value: '219.139.190.167',},
        {name: '鄂B1.B2-20150118\n\n\n\n悠博信息\n\n\n\n未明确机房',value: '219.139.190.167',},
    ],
    [
        {name: '福建电信',value: '222.76.210.153 ',},
        {name: '闽B2-20100054\n\n\n\n吾峰工贸\n\n\n\n未明确机房',value: '222.76.210.153 ',},
        {name: '闽B1-20110093\n\n\n\n翼讯科技\n\n\n\n厦门电信高殿机房',value: '222.76.210.153 ',},
    ],
    [
        {name: '广东电信',value: '14.17.121.200',},
        {name: 'B1.B2-20160110\n\n\n\n云聚信息\n\n\n\n广州信息港数据中心',value: '14.17.121.200',},
        {name: '京B1.B2-20120130\n\n\n\n睿江云计算\n\n\n\n粤B1.B2-20070326',value: '14.17.121.200',},
    ],
    [
        {name: '广东电信',value: '202.104.151.212',},
        {name: '粤B1.B2-20023022\n\n\n\n中通信息\n\n\n\n中国通信服务深圳云数据中心',value: '202.104.151.212',},
        {name: '合字B1.B2-20070005\n\n\n\n太平洋电信\n\n\n\n未明确机房',value: '202.104.151.212',},
    ],
    [
        {name: '广东电信',value: '116.205.3.157',},
        {name: 'B1-20140072\n\n\n\n沃通网络\n\n\n\n深圳中信怡正发机房',value: '116.205.3.157',},
        {name: '粤B2-20051021\n\n\n\n纵横信息\n\n\n\n梅林机房',value: '116.205.3.157',},
    ],
]

var coord1=[
	{
		x: 50,
		y: 200
	},{
		x: 100,
        y: 200
	},{
		x: 150,
		y: 200
	}
]

function seriesData(coord,data){
	for(var i=0;i<coord.length;i++){
		coord[i].name=data[i].name
	}
	return coord
}
graphOption = {
    title: {
        text: ''
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    label: {
        normal: {
            show: true,
            textStyle: {
                fontSize: 12
            },
        }
    },
    series: [
        {
            type: 'graph',
            layout: 'none',
            symbol: 'roundRect',
            symbolSize: 80,
            draggable: false,
            color:'#360293',
           // focusNodeAdjacency: true,
            roam: false,
           	edgeSymbol: ['', 'arrow'],
           	edgeSymbolSize: [0, 12],
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 13,
                        lineHeight:30
                    },
                }
            },
            force: {
                repulsion: 500
            },
            edgeLabel: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 14,
                        align:'center'
                    },
                    formatter: "{c}"
                }
            },
            data: seriesData(coord1,data1),
            links: data1,
            itemStyle: {
                normal: {
                    label: {
                       // position: ['200%', '-150%'],
                        textStyle: {
                             fontSize:16,
                             color: '#fff',
                            // align: 'right'
                        }
                    }
                }
            },
            lineStyle: {
                normal: {
                  opacity: 0.9,
                  width: 1,
                  curveness: 0
                }
            }
        }
    ]
};

var graphChart = echarts.init(document.getElementById('graphEc'))
graphChart.setOption(graphOption);

var i=0
var timer
function autoShow() {
    data1=[{
        name: json[i][0].name,
        value: json[i][0].value,
        source: 0,
        target: 1,
        lineStyle: {
            normal: {
                width:3,
                color: 'green'
            }
        },
    },{
        name: json[i][1].name,
        value: json[i][1].value,
        source: 1,
        target: 2,
        lineStyle: {
            normal: {
                width:3,
                color: 'red'
            }
        },  
    }
    ,{
        name: json[i][2].name,
    }]
    console.log(graphOption,11111111111)
    graphOption.series[0].data=seriesData(coord1,data1)
    graphOption.series[0].links=data1
    graphChart.setOption(graphOption);
    i++
    if(i>json.length-1){
        i=0
    }
}
autoShow()
timer=setInterval(autoShow,5000)

//下拉框选择
$(".IPchange").change(function(){
    var n = $(this).val();
    if(n=="全部"){
        clearInterval(timer)
        timer=setInterval(autoShow,5000)
    }else{
        clearInterval(timer)
        for(var j=0;j<json.length;j++){
           if(n==json[j][0].value){
            data1=[{
                name: json[j][0].name,
                value: json[j][0].value,
                source: 0,
                target: 1,
                lineStyle: {
                    normal: {
                        width:3,
                        color: 'green'
                    }
                },
            },{
                name: json[j][1].name,
                value: json[j][1].value,
                source: 1,
                target: 2,
                lineStyle: {
                    normal: {
                        width:3,
                        color: 'red'
                    }
                },  
            }
            ,{
                name: json[j][2].name,
            }]
            graphOption.series[0].data=seriesData(coord1,data1)
            graphOption.series[0].links=data1
            graphChart.setOption(graphOption);
           }
        }
    }
});

window.addEventListener("resize", function () {
    lineChart.resize();
    mapChart.resize();
    barChart.resize();
    graphChart.resize()
});